<script setup lang="ts">
import { DataLine, Edit } from '@element-plus/icons-vue'
import type { ComponentExposed } from 'vue-component-type-helpers'
import { HistoryModal } from './components'
import type { EnergyBindItem, TableColumn } from '@/types'
// ------------------use------------------
// #region
const { $prompt, $message } = useCurrentInstance()
const { withLoading, loading } = useDefineLoading()
const [tableData, setTableData] = useState<
  EnergyBindItem[]
>([])
const [selectEnergyId, setSelectEnergyId] = useState(0)
// #endregion
// ------------------静态变量------------------
// #region
const columns: TableColumn<EnergyBindItem>[] = [
  {
    key: uuid(),
    type: 'index',
    width: '80',
    label: '序号',
  },
  {
    key: uuid(),
    label: '能源名称',
    prop: 'name',
  },
  {
    key: uuid(),
    label: '能源代码',
    prop: 'code',
  },
  {
    key: uuid(),
    label: '能源单位',
    prop: 'energyUnit',
  },
  {
    key: uuid(),
    label: '折标系数',
    prop: 'discountFactor',
  },
  {
    key: uuid(),
    label: '最新价格',
    prop: 'energyPrice',
  },
]
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const historyModalRef
  = ref<ComponentExposed<typeof HistoryModal>>()
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region
// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
function showHistoryModal(id: number) {
  setSelectEnergyId(id)
  historyModalRef.value?.open?.()
}
async function getTableData() {
  const { data: res } = await withLoading(
    energyApi.queryEnterpriseBindList,
  )()
  setTableData(res)
}
async function updatePrice(raw: EnergyBindItem) {
  const v = await $prompt(
    '请输入能源最新价格！',
    '更新价格',
    {
      type: 'success',
      inputPattern: /^-?\d+(\.\d+)?$/,
      inputErrorMessage: '请输入正确数字！',
      inputValue: raw.energyPrice
        ? `${raw.energyPrice}`
        : '',
    },
  ).catch(e => e)
  if (v === 'cancel')
    return
  await energyPriceApi.updatePrice({
    energyId: raw.energyId,
    energyName: raw.name,
    energyPrice: +v.value,
  })
  getTableData()
  $message.success('价格更新成功！')
}
// #endregion
</script>

<template>
  <div
    class="padding-sm flex-direction flex align-end container"
  >
    <view-table
      :loading="loading"
      :columns="columns"
      :data="tableData"
      :show-toolbox="false"
    >
      <template #operate="{ row }">
        <TdButton
          title="价格更新"
          :icon="Edit"
          type="primary"
          @click="updatePrice(row)"
        />
        <TdButton
          title="历史价格"
          :icon="DataLine"
          type="success"
          @click="showHistoryModal(row.energyId)"
        />
      </template>
    </view-table>
    <HistoryModal
      ref="historyModalRef"
      :energy-id="selectEnergyId"
    />
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
